<template>
  <div class="header">
    <div class="container">
      <div class="logo" @click="toHome"><img src="../assets/logo.png" /></div>
      <ul v-if="langIndex === 0">
        <template v-for="(item, index) in nav">
          <li
            :key="index"
            @click="toPage(item, index)"
            :class="{ active: currentIndex == index }"
          >
            <p class="zh">{{ item.zh }}</p>
            <!-- <p class="en">{{ item.en }}</p> -->
          </li>
        </template>
      </ul>
      <ul v-else class="english">
        <template v-for="(item, index) in nav">
          <li
            :key="index"
            @click="toPage(item, index)"
            :class="{ active: currentIndex == index }"
          >
            <!-- <p class="zh">{{ item.zh }}</p> -->
            <p class="en">{{ item.en }}</p>
          </li>
        </template>
      </ul>
      <div class="lang">
        <span
          v-for="(item, index) in langList"
          :key="index"
          @click="setLanguage(item, index)"
          :class="{ active: index === langIndex }"
          >{{ item | formatLanguage }}</span
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Header",
  //props: ["currentIndex"],
  filters: {
    formatLanguage(val) {
      if (val === "ZH") {
        return "中";
      } else {
        return "EN";
      }
    },
  },
  created() {
    const lang = localStorage.getItem("lang");
    const langCode = lang === "ZH" ? 0 : 1;
    this.langIndex = langCode;
    this.currentIndex = this.$store.state.scrollIndex;
  },
  data() {
    return {
      langIndex: "",
      currentIndex: -1,
      langList: ["ZH", "EN"],
      nav: [
        {
          zh: "项目介绍",
          en: "INSTITUTE INTRODUCTION",
          path: "/",
        },
        {
          zh: "产业政策",
          en: "INDUSTRY POLICY",
          path: "/",
        },
        {
          zh: "动态",
          en: "NEWS",
          path: "/",
        },
        {
          zh: "资料",
          en: "File",
          path: "/file",
        },
        {
          zh: "联系我们",
          en: "CONTACT US",
          path: "/about",
        },
      ],
    };
  },
  methods: {
    toPage(item, index) {
      this.$store.commit("changeScrollIndex", index);
      this.currentIndex = index;
      this.$emit("handelClick");
      if (item.path !== this.$route.path) {
        this.$router.push({
          path: item.path,
        });
      }
    },
    toHome() {
      this.$store.commit("changeScrollIndex", -1);
      this.$emit("handelClick");
      // if (this.$store.state.scrollIndex == -1) {
      //   return false;
      // }
      this.$router.push({
        path: "/",
      });
    },
    setLanguage(item, index) {
      this.langIndex = index;
      localStorage.setItem("lang", item);
      this.$emit("changeLanguage", item);
      this.$store.commit('changeLang');
    },
  },
};
</script>

<style scoped lang="less">
.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  background-color: #255389;
  padding: 10px 0;

  .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 1200px;
    margin: 0 auto;
  }

  .logo {
    width: 120px;

    img {
      cursor: pointer;
      height: 55px;
    }
  }

  ul {
    display: flex;
    margin-top: 18px;
    margin-left: -62px;

    li {
      padding: 0 45px;
      text-align: center;
      cursor: pointer;
      color: #fff;
      opacity: 0.8;
      line-height: 1;

      .zh {
        font-size: 18px;
      }

      .en {
        font-size: 13px;
        margin-top: 5px;
      }
    }

    li.active {
      opacity: 1;
    }
  }

  .lang {
    margin-top: 14px;
    height: 32px;
    line-height: 32px;
    width: 65px;
    color: #6a5e5e;
    background-color: #000;
    border-radius: 25px;
    text-align: center;
    font-size: 12px;

    span {
      cursor: pointer;
      padding: 0 5px;
    }

    span.active {
      color: #fff;
    }

    span:nth-child(1) {
      border-right: 1px solid #fff;
    }
  }
}

.header-home {
  background-color: rgba(37, 83, 137, 0.5);
}
</style>
